 <template>
 <!--单选复选 begin-->
 <div style="padding:10px 20px;" class="overflowY">
    <div style="psdding:0px 0px 0px 0px;margin:0px 0px 0px 0px;border-bottom:1px solid #ccc;padding-bottom: 12px;position: relative;">
      <div v-bind:class="{isShow: isListShow}">
        <div class="radioCheckboxBtn">
          <el-row>
            <el-col :span="3">
              <span class="screenName">筛选条件1：</span>
            </el-col>
            <el-col :span="21">
              <div class="screenList">
                <el-checkbox-group v-model="checkList1" @change="checkedGroup">
                  <el-checkbox :label="item.val" :key="'checkOne' + index" v-for="item in listData.list1" :disabled="item.disabled">{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="radioCheckboxBtn">
          <el-row>
            <el-col :span="3">
              <span class="screenName">筛选条件标题：</span>
            </el-col>
            <el-col :span="21">
              <div class="screenList">
                <el-radio-group v-model="radio2" @change="radioGroup">
                  <el-radio :label="item.val" :key="'radioOne' + index" v-for="item in listData.list2" :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="radioCheckboxBtn">
          <el-row>
            <el-col :span="3">
              <span class="screenName">筛选条件2：</span>
            </el-col>
            <el-col :span="21">
              <div class="screenList">
                <el-checkbox-group v-model="checkList2">
                  <el-checkbox :label="item.val" :key="'checkTwo' + index" v-for="item in listData.list3" :disabled="item.disabled">{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="showBtnBox" v-if="isBtnShow">
        <el-button size="mini" round class="showBtn" @click="showBtnFun">{{btnSize}}</el-button>
      </div>
    </div>
   <base-card title="HTML">
     <div v-html="radioCheckHtml">{{radioCheckHtml}}</div>
   </base-card>
   <base-card title="JS">
     <pre><code>export default {<br>  data() {<br>    return {<br>      listData: {<br>        list1: [<br>          {<br>            val: 0,<br>            label: '复选框A',<br>            disabled: false<br>          },<br>          {<br>            val: 1,<br>            label: '复选框B',<br>            disabled: false<br>          },<br>          {<br>            val: 2,<br>            label: '复选框C',<br>            disabled: false<br>          },<br>          {<br>            val: 3,<br>            label: '禁用',<br>            disabled: true<br>          },<br>          {<br>            val: 4,<br>            label: '选中且禁用',<br>            disabled: true<br>          }<br>        ],<br>        list2: [<br>          {<br>            val: 0,<br>            label: '备选项A',<br>            disabled: false<br>          },<br>          {<br>            val: 1,<br>            label: '备选项B',<br>            disabled: false<br>          },<br>          {<br>            val: 2,<br>            label: '备选项C',<br>            disabled: false<br>          }<br>        ],<br>        list3: [<br>          {<br>            val: 0,<br>            label: '复选框1',<br>            disabled: false<br>          },<br>          {<br>            val: 1,<br>            label: '复选框2',<br>            disabled: false<br>          },<br>          {<br>            val: 2,<br>            label: '复选框3',<br>            disabled: false<br>          },<br>          {<br>            val: 3,<br>            label: '复选框4',<br>            disabled: false<br>          },<br>          {<br>            val: 4,<br>            label: '复选框5',<br>            disabled: false<br>          },<br>          {<br>            val: 5,<br>            label: '复选框6',<br>            disabled: false<br>          },<br>          {<br>            val: 6,<br>            label: '复选框7',<br>            disabled: false<br>          },<br>          {<br>            val: 7,<br>            label: '复选框8',<br>            disabled: false<br>          },<br>          {<br>            val: 8,<br>            label: '复选框9',<br>            disabled: false<br>          },<br>          {<br>            val: 9,<br>            label: '复选框10',<br>            disabled: false<br>          }<br>        ],<br>        list4: [<br>          {<br>            val: 0,<br>            label: '复选框1',<br>            disabled: false<br>          },<br>          {<br>            val: 1,<br>            label: '复选框2',<br>            disabled: false<br>          },<br>          {<br>            val: 2,<br>            label: '复选框3',<br>            disabled: false<br>          },<br>          {<br>            val: 3,<br>            label: '复选框4',<br>            disabled: false<br>          },<br>          {<br>            val: 4,<br>            label: '复选框5',<br>            disabled: false<br>          },<br>          {<br>            val: 5,<br>            label: '复选框6',<br>            disabled: false<br>          },<br>          {<br>            val: 6,<br>            label: '复选框7',<br>            disabled: false<br>          },<br>          {<br>            val: 7,<br>            label: '复选框8',<br>            disabled: false<br>          },<br>          {<br>            val: 8,<br>            label: '复选框9',<br>            disabled: false<br>          },<br>          {<br>            val: 9,<br>            label: '复选框10',<br>            disabled: false<br>          }<br>        ]<br>      },<br>      isListShow: false,<br>      isBtnShow: false,<br>      btnSize: '展开更多',<br>      checkList1: [0, 4],<br>      checkList2: [3],<br>      radio2: 1<br>    }<br>  },<br>  components: {<br>    BaseCard<br>  },<br>  created() {<br>    this.moreFun()<br>  },<br>  mounted() {<br><br>  },<br>  methods: {<br>    moreFun() {<br>      if (Object.keys(this.listData).length &gt; 3) {<br>        this.isListShow = true<br>        this.isBtnShow = true<br>      } else {<br>        this.isListShow = false<br>        this.isBtnShow = false<br>      }<br>    },<br>    showBtnFun() {<br>      this.isListShow = !this.isListShow<br>      console.log(this.isListShow)<br>      if (this.isListShow) {<br>        this.btnSize = '展开更多'<br>      } else {<br>        this.btnSize = '收起列表'<br>      }<br>    },<br>    checkedGroup(val) {<br>      console.log(val)<br>    },<br>    radioGroup(val) {<br>      console.log(val)<br>    }<br>  }<br>}</code></pre>
   </base-card>
   <base-card title="CSS">
     <pre><code>&lt;style scoped&gt;<br>   .screenName{<br>     display: inline-block;<br>     font-size: 14px;<br>     color: #333333;<br>     margin-top: 8px;<br>   }<br>   .screenList{<br><br>   }<br>   .radioCheckboxBtn{<br>     padding: 12px 0;<br>     border-top: 1px dashed #ccc;<br>   }<br>   .radioCheckboxBtn:first-child{<br>     margin-top: 0;<br>     border-top: 0;<br>   }<br>   .el-checkbox{<br>     width: 130px;<br>     margin-left: 0 !important;<br>     margin-top: 8px;<br>   }<br>   .el-radio{<br>     width: 130px;<br>     margin-left: 0 !important;<br>     margin-top: 8px;<br>   }<br>   .isShow{<br>     overflow: hidden;<br>     height: 169px !important;<br>   }<br>   .showBtnBox{<br>     position: absolute;<br>     width: 100%;<br>     text-align: center;<br>     bottom: -15px;<br>   }<br>   .showBtn{<br><br>   }<br> &lt;/style&gt;</code></pre>
   </base-card>
 </div>
 <!--单选复选 end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  data() {
    return {
      radioCheckHtml: '<pre><code>    &lt;div style="psdding:0px 0px 0px 0px;margin:0px 0px 0px 0px;border-bottom:1px solid #ccc;padding-bottom: 12px;position: relative;"&gt;<br>      &lt;div v-bind:class="{isShow: isListShow}"&gt;<br>        &lt;div class="radioCheckboxBtn"&gt;<br>          &lt;el-row&gt;<br>            &lt;el-col :span="3"&gt;<br>              &lt;span class="screenName"&gt;筛选条件1：&lt;/span&gt;<br>            &lt;/el-col&gt;<br>            &lt;el-col :span="21"&gt;<br>              &lt;div class="screenList"&gt;<br>                &lt;el-checkbox-group v-model="checkList1" @change="checkedGroup"&gt;<br>                  &lt;el-checkbox :label="item.val" v-for="item in listData.list1" :disabled="item.disabled"&gt;{{item.label}}&lt;/el-checkbox&gt;<br>                &lt;/el-checkbox-group&gt;<br>              &lt;/div&gt;<br>            &lt;/el-col&gt;<br>          &lt;/el-row&gt;<br>        &lt;/div&gt;<br>        &lt;div class="radioCheckboxBtn"&gt;<br>          &lt;el-row&gt;<br>            &lt;el-col :span="3"&gt;<br>              &lt;span class="screenName"&gt;筛选条件标题：&lt;/span&gt;<br>            &lt;/el-col&gt;<br>            &lt;el-col :span="21"&gt;<br>              &lt;div class="screenList"&gt;<br>                &lt;el-radio-group v-model="radio2" @change="radioGroup"&gt;<br>                  &lt;el-radio :label="item.val" v-for="item in listData.list2" :disabled="item.disabled"&gt;{{item.label}}&lt;/el-radio&gt;<br>                &lt;/el-radio-group&gt;<br>              &lt;/div&gt;<br>            &lt;/el-col&gt;<br>          &lt;/el-row&gt;<br>        &lt;/div&gt;<br>        &lt;div class="radioCheckboxBtn"&gt;<br>          &lt;el-row&gt;<br>            &lt;el-col :span="3"&gt;<br>              &lt;span class="screenName"&gt;筛选条件2：&lt;/span&gt;<br>            &lt;/el-col&gt;<br>            &lt;el-col :span="21"&gt;<br>              &lt;div class="screenList"&gt;<br>                &lt;el-checkbox-group v-model="checkList2"&gt;<br>                  &lt;el-checkbox :label="item.val" v-for="item in listData.list3" :disabled="item.disabled"&gt;{{item.label}}&lt;/el-checkbox&gt;<br>                &lt;/el-checkbox-group&gt;<br>              &lt;/div&gt;<br>            &lt;/el-col&gt;<br>          &lt;/el-row&gt;<br>        &lt;/div&gt;<br>      &lt;/div&gt;<br>      &lt;div class="showBtnBox" v-if="isBtnShow"&gt;<br>        &lt;el-button size="mini" round class="showBtn" @click="showBtnFun"&gt;{{btnSize}}&lt;/el-button&gt;<br>      &lt;/div&gt;<br>    &lt;/div&gt;</code></pre>',
      listData: {
        list1: [
          {
            val: 0,
            label: '复选框A',
            disabled: false
          },
          {
            val: 1,
            label: '复选框B',
            disabled: false
          },
          {
            val: 2,
            label: '复选框C',
            disabled: false
          },
          {
            val: 3,
            label: '禁用',
            disabled: true
          },
          {
            val: 4,
            label: '选中且禁用',
            disabled: true
          }
        ],
        list2: [
          {
            val: 0,
            label: '备选项A',
            disabled: false
          },
          {
            val: 1,
            label: '备选项B',
            disabled: false
          },
          {
            val: 2,
            label: '备选项C',
            disabled: false
          }
        ],
        list3: [
          {
            val: 0,
            label: '复选框1',
            disabled: false
          },
          {
            val: 1,
            label: '复选框2',
            disabled: false
          },
          {
            val: 2,
            label: '复选框3',
            disabled: false
          },
          {
            val: 3,
            label: '复选框4',
            disabled: false
          },
          {
            val: 4,
            label: '复选框5',
            disabled: false
          },
          {
            val: 5,
            label: '复选框6',
            disabled: false
          },
          {
            val: 6,
            label: '复选框7',
            disabled: false
          },
          {
            val: 7,
            label: '复选框8',
            disabled: false
          },
          {
            val: 8,
            label: '复选框9',
            disabled: false
          },
          {
            val: 9,
            label: '复选框10',
            disabled: false
          }
        ]
      },
      isListShow: false,
      isBtnShow: false,
      btnSize: '展开更多',
      checkList1: [0, 4],
      checkList2: [3],
      radio2: 1
    }
  },
  components: {
    BaseCard
  },
  created() {
    this.moreFun()
  },
  mounted() {

  },
  methods: {
    moreFun() {
      if (Object.keys(this.listData).length > 3) {
        this.isListShow = true
        this.isBtnShow = true
      } else {
        this.isListShow = false
        this.isBtnShow = false
      }
    },
    showBtnFun() {
      this.isListShow = !this.isListShow
      console.log(this.isListShow)
      if (this.isListShow) {
        this.btnSize = '展开更多'
      } else {
        this.btnSize = '收起列表'
      }
    },
    checkedGroup(val) {
      console.log(val)
    },
    radioGroup(val) {
      console.log(val)
    }
  }
}
</script>

 <style scoped>
   .screenName{
     display: inline-block;
     font-size: 14px;
     color: #333333;
     margin-top: 8px;
   }
   .screenList{

   }
   .radioCheckboxBtn{
     padding: 12px 0;
     border-top: 1px dashed #ccc;
   }
   .radioCheckboxBtn:first-child{
     margin-top: 0;
     border-top: 0;
   }
   .el-checkbox{
     width: 130px;
     margin-left: 0 !important;
     margin-top: 8px;
   }
   .el-radio{
     width: 130px;
     margin-left: 0 !important;
     margin-top: 8px;
   }
   .isShow{
     overflow: hidden;
     height: 169px !important;
   }
   .showBtnBox{
     position: absolute;
     width: 100%;
     text-align: center;
     bottom: -15px;
   }
   .showBtn{

   }
 </style>

